<template>
	<view class="content">
		<!-- #ifdef MP -->
		<u-navbar :placeholder='true' :fixed='true' height="88rpx" bg-color="#FF594D" left-icon=" ">
		</u-navbar>
		<!-- #endif -->
		<!-- 搜索框 -->
		<view class="top-search">
			<view class="search_content" @click="toSeach">
				<u-search placeholder="请输入上平名称或品牌" :disabled="true" :inputStyle="style" v-model="keywords" height="68rpx"
					searchIconColor="#eeeeee" searchIconSize="34rpx" placeholderColor="#eeeeee" color="#fff" bgColor="#ff8a82"
					:showAction='false' @change="search"></u-search>
			</view>
			<view class="rightIcon" @click="scanQrCodes">
				<u-icon name="scan" size="44rpx" color="#fff"></u-icon>
				<!-- <image src="../../static/images/index/Frame 344@2x.png" mode=""></image> -->
				<text>扫一扫</text>
			</view>
			<view class="rightIcon" @click="toOrder">
				<image src="../../static/images/index/Frame 344@2x.png" mode=""></image>
				<text>订单</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper_content">
			<view class="swiper_bg">
				<image src="../../static/images/index/Intersect@2x.png" mode=""></image>
			</view>
			<u-swiper height="330rpx" indicatorMode="line" :list="list" @change="e => current = e.current" :autoplay="false">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 活动 -->
		<view class="activity">
			<view class="activity_content">
				<image class="bg" src="../../static/images/index/Group 208@2x.png" mode=""></image>
				<view class="activity_title">
					<view class="title_left">
						<text>活动专区</text>
						<image src="../../static/images/index/Group 5@2x.png" mode=""></image>
					</view>
					<view class="title_right">
						<text>更多</text>
						<image src="../../static/images/index/黑色=右箭头, 黑白=on@2x.png" mode=""></image>
					</view>
				</view>

				<view class="activity_main">
					<view class="activity_entrance">
						<view class="entrance_left" @click="toGroup">
							<image src="../../static/images/index/Frame 347@2x.png" mode=""></image>
							<text>团购专区</text>
							<button>点击进入</button>
						</view>
						<view class="entrance_right" @click="toSckill">
							<image src="../../static/images/index/Frame 348@2x.png" mode=""></image>
							<text>秒杀专区</text>
							<button>点击进入</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新品 -->
		<view class="new_product_line">
			新品首发
		</view>
		<view class="new_product">
			<view class="new_product_list">
				<template v-for="(item,index) in list1">
					<goods-cover :key="index" :item="item"></goods-cover>
				</template>
			</view>

		</view>
		<!-- 底部导航栏 -->
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		getCommodity,
		setConcerning,
		getConcerning
	} from '../../api/index.js'
	import {
		bindmember,
		memberList
	} from '../../api/employee.js'
	import store from 'store'
	import list from '../../uni_modules/uview-ui/libs/config/props/list.js'
	export default {
		data() {
			return {
				current: 0,
				list1: [],
				list2: [],
				list: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				keywords: '',
				style: {
					'font-size': '24rpx',
					color: '#eee'
				}
			}
		},
		onShow() {
			// console.log(1);
			uni.hideTabBar()
			if (this.$store.state.userInfo.isSysuserid) {
				memberList().then(res => {
					if (res.code == 401) {
						this.$store.commit('setEmployeeIsLogin', false)
						uni.showToast({
							title: 'crm账号绑定失效，请重新绑定',
							icon: 'none',
							success: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/personal-data/personal-data?id=' + this.$store.state.userInfo.id
									})
								}, 1000)
							}
						})
					}
				})
				// console.log(res);
			}
		},

		created() {
			// 获取首页商品列表
			this.getCommodityData()
			this.getCon()
			// this.setCon()
		},
		mounted() {},
		methods: {
			scanQrCodes() {
				uni.scanCode({
					success: (res) => {
						console.log(res);
						if (res.errMsg === 'scanCode:ok') {
							this.empBindMember({
								userId: parseInt(res.result),
								employeeId: this.$store.state.employeeInfo.userId
							})
							return
						}
						uni.showToast({
							title: '扫码失败',
							icon: 'error'
						})
					},
					fail(err) {
						console.log(err);
						// uni.showToast({
						// 	title: '扫码失败',
						// 	icon: 'error'
						// })
					}
				})
			},
			// 绑定会员
			async empBindMember(data) {
				const res = await bindmember(data)
				console.log(res);
				if (res.code != 200) {
					if (res.code == 401) {
						uni.showToast({
							title: '员工绑定过期',
							icon: 'error'
						})
						return
					}
					uni.showToast({
						title: res.msg ?? '添加失败',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '添加成功',
					success() {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages_spell/pages/member-detail/member-detail?id=' + res.data.id
							})
						}, 500)
					}
				})
			},
			search(e) {

			},
			async setCon() {
				const res = await setConcerning({
					concerning4: 'https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/e50e1bc6-be23-40b4-a7c2-1b30d7c933ac.jpg,https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/e50e1bc6-be23-40b4-a7c2-1b30d7c933ac.jpg,https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/e50e1bc6-be23-40b4-a7c2-1b30d7c933ac.jpg,https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/e50e1bc6-be23-40b4-a7c2-1b30d7c933ac.jpg'
				})
				// console.log(res);
			},
			async getCon() {
				const res = await getConcerning()
				// console.log(res);
				if (res.concerning4) {
					this.list = res.concerning4.split(',')
				}
			},
			toSckill() {
				uni.navigateTo({
					url: '/pages/seckill/seckill'
				})
			},
			toGroup() {
				uni.navigateTo({
					url: '/pages/group_purchase/group_purchase'
				})
			},
			toOrder() {
				if (this.$store.state.isLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/mine-order/mine-order?index=0'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_mine/pages/login/login'
				})
			},
			toSeach() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			// 获取首页商品列表
			async getCommodityData() {
				const res = await getCommodity({
					commodityType: 3,
					// commodityName: '茶'
				})
				// console.log(res);
				this.list1 = res.rows
			}
		}
	}
</script>


<style lang="scss">
	.content {
		background-color: #f0f2f5;
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.top-search {
		height: 138rpx;
		background-color: #ff594d;
		display: flex;
		align-items: center;
		z-index: 1;
		position: relative;
		padding: 0 20rpx;
	}

	.swiper_content {
		padding: 0 20rpx;
		position: relative;

		.swiper_bg {
			position: absolute;
			width: 100%;
			padding: 0 -20rpx;
			left: 0;
			height: 480rpx;
			bottom: 0;
			overflow: hidden;

			image {
				width: 100%;
				top: 0;
				bottom: 0;
				position: absolute;

			}
		}
	}

	.search_content {
		width: 100%;
	}

	.rightIcon {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 30rpx;

		image {
			display: block;
			width: 44rpx;
			height: 44rpx;
		}

		text {
			font-size: 20rpx;
			color: #fff;
			white-space: nowrap;
		}
	}

	.activity {
		padding: 18rpx 20rpx 40rpx;

		.activity_content {

			height: 345rpx;
			box-sizing: border-box;
			position: relative;
			padding: 10rpx 38rpx 0;
			z-index: 1;

			.bg {
				width: 100%;
				display: block;
				height: 345rpx;
				top: 0;
				position: absolute;
				left: 0;
				z-index: 0;
			}

			.activity_title {
				height: 66rpx;
				display: flex;
				align-items: center;
				color: #FF594D;
				font-weight: bold;
				justify-content: space-between;

				.title_left {
					font-size: 32rpx;
					position: relative;
					z-index: 11;
					display: flex;
					width: 260rpx;
					align-items: center;
					justify-content: space-between;

					image {
						display: block;
						width: 95rpx;
						height: 44rpx;
					}
				}

				.title_right {

					display: flex;
					align-items: center;
					padding-right: 36rpx;

					text {
						font-size: 26rpx;
						position: relative;
						z-index: 11;
					}

					image {
						display: block;
						width: 44rpx;
						height: 44rpx;
					}

				}
			}

			.activity_main {
				padding: 30rpx 30rpx;
				display: flex;
				align-items: center;

				.activity_entrance {
					width: 100%;
					height: 184rpx;
					background-color: #fff;
					border-radius: 30rpx;
					box-shadow: 0rpx 0rpx 4rpx 5rpx #eee;
					box-sizing: border-box;
					padding: 35rpx 84rpx;
					display: flex;
					justify-content: space-between;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						width: 2rpx;
						height: 54rpx;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						background-color: #D9D9D9;
					}


					.entrance_left,
					.entrance_right {
						display: flex;
						flex-direction: column;
						width: 120rpx;
						height: 100%;
						align-items: center;
						justify-content: space-between;

						image {
							width: 44rpx;
							height: 44rpx;
						}

						text {
							color: #333332;
							font-size: 24rpx;
						}

						button {
							width: 120rpx;
							height: 32rpx;
							border: 0;
							font-size: 20rpx;
							background-color: #FF594D;
							border-radius: 999rpx;
							line-height: 30rpx;
							text-align: center;
							padding: 0;
							color: #fff;
						}
					}
				}
			}
		}
	}

	.new_product_line {
		font-size: 40rpx;
		text-align: center;
		color: #FF594D;
		margin-bottom: 20rpx;
		font-weight: bold;
		position: relative;

		&::before,
		&::after {
			content: '';
			width: 258rpx;
			height: 2rpx;
			line-height: 56rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background-color: #FF594D;
		}

		&::before {
			left: 30rpx;
		}

		&::after {
			right: 30rpx;
		}
	}

	.new_product {
		padding: 0 25rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.new_product_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 8rpx;
			width: 36rpx;
			border-radius: 100rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5rpx;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2rpx 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100rpx;
		width: 35rpx;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12rpx;
		}
	}
</style>